<template>
    <div>
        <a-card class="card">
            <!-- 面包屑导航 -->
            <a-breadcrumb class="breadcrumb" v-if="isPost">
                <a-breadcrumb-item>论坛管理</a-breadcrumb-item>
                <a-breadcrumb-item><router-link to="/post/list">文章管理</router-link></a-breadcrumb-item>
                <a-breadcrumb-item>发布文章</a-breadcrumb-item>
            </a-breadcrumb>
            <a-breadcrumb class="breadcrumb" v-else>
                <a-breadcrumb-item>快讯管理</a-breadcrumb-item>
                <a-breadcrumb-item><router-link to="/new/list">新闻列表</router-link></a-breadcrumb-item>
                <a-breadcrumb-item>发布快讯</a-breadcrumb-item>
            </a-breadcrumb>
            <a-form>
                <a-form-item label="标题" name="title">
                    <a-input v-model:value="formData.title" placeholder="请输入标题"></a-input>
                </a-form-item>
                <a-form-item label="封面">
                    <img :src="uploadAvatarImage" style="height: 100px; width: 100px;" alt="" v-if="uploadAvatarImage">
                    <a-upload class="upload" v-model:file-list="fileList" name="file" v-else :action="getIMAGEURL()"
                        :headers="headers" @change="handleChange">
                        <a-button>
                            <upload-outlined></upload-outlined>
                            上传封面
                        </a-button>
                    </a-upload>
                </a-form-item>
                <a-form-item label="类别" name="category" v-if="isPost">
                    <a-space>
                        <a-select v-model:value="value" style="width: 120px" :options="options"
                            @change="handleChangeSelect">
                        </a-select>
                    </a-space>
                </a-form-item>
                <a-form-item label="内容" name="content">
                    <wang-editor v-model="HTMLContent" style="height: 500px" />
                </a-form-item>
            </a-form>
            <a-button type="primary" size="large" style="margin-left:40px;" @click="uploadNews">{{
                isPost ? '发布文章' :
                '发布快讯'
            }}</a-button>
        </a-card>
    </div>
</template>

<script setup lang='ts'>
import { message } from 'ant-design-vue'
import type { UploadChangeParam, SelectProps } from 'ant-design-vue'
import { UploadOutlined } from '@ant-design/icons-vue'
import { useUserStore } from '@/stores'
import { getIMAGEURL } from '@/utils/getImageUrl'
const initValues = {
    title: '',
    image: '',
    content: '',
    adminId: 0
}

const store = useUserStore()
const router = useRouter()
const route = useRoute()
const HTMLContent = ref('')

const category = ref(0)
const formData = ref(initValues)

const isPost = ref(false)
onMounted(() => {
    if (route.query.posts) {
        isPost.value = true
    }
    // console.log(isPost.value)
})

const uploadAvatarImage = ref<string>('')

// 上传图片
const handleChange = (info: UploadChangeParam) => {
    if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
        uploadAvatarImage.value = info.file.response.data.url
        formData.value.image = uploadAvatarImage.value
    }
    if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
    } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
    }
};

const fileList = ref([]);
const headers = reactive({
    authorization: 'authorization-text',
})

const uploadNews = async () => {
    if (!formData.value.title) return message.error('标题不能为空')
    if (isPost.value) {
        formData.value.content = HTMLContent.value
        formData.value.adminId = store.user?.id as number
        const res = await publicPost({ ...formData.value, category: category.value })
        if (res.code !== 201) return message.error('发布失败')
        message.success('发布成功')
        formData.value = initValues
        router.push('/post/list')
    } else {
        formData.value.content = HTMLContent.value
        formData.value.adminId = store.user?.id as number
        const res = await publicNews(formData.value)
        if (res.code !== 201) return message.error('发布失败')
        message.success('发布成功')
        formData.value = initValues
        router.push('/new/list')
    }
}

// 0考研专区 1就业专区 2校园活动
// 选择器 
const options = ref<SelectProps['options']>([
    {
        value: 0,
        label: '考研专区',
    },
    {
        value: 1,
        label: '就业专区',
    },
    {
        value: 2,
        label: '校园活动',
    },
])

const handleChangeSelect: SelectProps['onChange'] = value => {
    // console.log(value)
    category.value = Number(value)
}

// const categoryNumber = ref(0)
const value = ref({ value: category })

</script>

<style scoped lang="less">
.breadcrumb {
    margin-bottom: 15px;
}

.card {
    height: 890px;
}
</style>